<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body>
<div class="layui-layout layui-layout-admin">



    <form class="layui-form layui-form-pane" action="">


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">促销名称</label>
                <div class="layui-input-inline" >
                    <input type="text"  name="name" th:value="${promotionSpecialOffer.name}"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" >
                <label class="layui-form-label">促销单号</label>
                <div class="layui-input-inline" style="width: 250px">
                    <input type="text" readonly id="id" name="id" th:value="${promotionSpecialOffer.id}" autocomplete="off" class="layui-input">
                </div>
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">采购门店</label>
                <div class="layui-input-inline">
                    <select name="merchantsId" id="merchantsId" disabled>
                        <option th:each="l : ${merchantsInformationList}" th:value="${l.id}" th:text="${l.name}" th:selected="${l.id == promotionSpecialOffer.merchantsId}">无</option>

                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">活动范围</label>
                <div class="layui-input-inline">
                    <select name="promontionScope" id="promontionScope" >
                        <option value="0">不作限制</option>
                        <option th:each="l : ${memberCategoryList}" th:value="${l.id}" th:text="${l.name}" th:selected="${l.id == promotionSpecialOffer.promontionScope}">无</option>

                    </select>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">促销模式</label>
                <div class="layui-input-inline">
                    <select name="categoryId" id="categoryId" lay-filter="categoryId">

                        <option th:each="l : ${promotionCategoryList}" th:value="${l.id}" th:text="${l.promotionPattern}" th:selected="${l.id == promotionSpecialOffer.categoryId}">无</option>

                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">促销日期</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" th:value="${promotionSpecialOffer.startDate}" id="start" name="startDate" placeholder="yyyy-MM">
                </div>
            </div>
            -
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" th:value="${promotionSpecialOffer.endDate}" id="end" name="endDate" placeholder="yyyy-MM">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">促销周期</label>
            <div class="layui-input-block">
                <input type="checkbox" name="periodMon" th:checked='${promotionSpecialOffer.periodMon}' title="周一">
                <input type="checkbox" name="periodTue" th:checked="${promotionSpecialOffer.periodTue}" title="周二">
                <input type="checkbox" name="periodWed" th:checked="${promotionSpecialOffer.periodWed}" title="周三">
                <input type="checkbox" name="periodThu" th:checked="${promotionSpecialOffer.periodThu}" title="周四">
                <input type="checkbox" name="periodFri" th:checked="${promotionSpecialOffer.periodFri}" title="周五">
                <input type="checkbox" name="periodSat" th:checked="${promotionSpecialOffer.periodSat}" title="周六">
                <input type="checkbox" name="periodSun" th:checked="${promotionSpecialOffer.periodSun}" title="周日">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" th:value="${promotionSpecialOffer.remark}" class="layui-textarea"></textarea>
            </div>
        </div>




        <!--展示数据-->
        <div>

            <table class="layui-hide" id="specialOffer" lay-filter="specialOffer" ></table>

            <!--        表格右侧操作栏-->
            <script type="text/html" id="barDemo">
                <button class="layui-btn  layui-btn-sm layui-btn-primary" lay-event="del"><i class="layui-icon layui-icon-close"></i></button>
            </script>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">选择菜品</button>
                </div>
            </script>
        </div>




        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">制单人</label>
                <div class="layui-input-inline" style="width: 70px;">
                    <input type="text" readonly name="preparedBy" th:value="${promotionSpecialOffer.preparedBy}"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">制单日期</label>
                <div class="layui-input-inline" style="width: 150px" >
                    <input type="text" readonly name="preparedDate" th:value="${promotionSpecialOffer.preparedDate}" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" id="cancel" class="layui-btn ">取消</button>
                <button type="button" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>

            </div>
        </div>



    </form>


</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    //JavaScript代码区域
    layui.use(['element','table','form','laydate'], function(){
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.$;

        //年月选择器
        laydate.render({
            elem: '#start'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#end'
            ,type: 'datetime'
        });


        var categoryId = $("#categoryId").val();
        if(categoryId == "7001"){
            //表格初始化
            table.render({
                elem: '#specialOffer'
                ,url:baseUrl+'promotion/specialOffer/recordList'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,width: 950
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,cols: [[
                    {field:'recordId', width:180, title: 'ID'}
                    ,{field:'id', width:80, title: 'ID',hide:true}
                    ,{field:'recordName', width:200, title: '菜品名称' }
                    ,{field:'priceString', width:200, title: '售价' }
                    ,{field:'specialPriceString', width:200, title: '特价' ,edit:'text'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:163}
                ]]
                ,where: {
                    id:$("#id").val(),


                } //设定异步数据接口的额外参数

            });

        }
        if (categoryId == "7002"){
            //表格初始化
            table.render({
                elem: '#specialOffer'
                ,url:baseUrl+'promotion/specialOffer/recordList'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,width: 950
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,cols: [[
                    {field:'recordId', width:180, title: 'ID'}
                    ,{field:'id', width:80, title: 'ID',hide:true}
                    ,{field:'recordName', width:200, title: '菜品名称' }
                    ,{field:'priceString', width:200, title: '售价' }
                    ,{field:'discountString', width:200, title: '折扣' ,edit:'text'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:163}
                ]]
                ,where: {
                    id:$("#id").val(),


                } //设定异步数据接口的额外参数

            });

        }
        if (categoryId == "7003" || categoryId == "7004"){
            //表格初始化
            table.render({
                elem: '#specialOffer'
                ,url:baseUrl+'promotion/specialOffer/recordList'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,width: 950
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,cols: [[
                    {field:'recordId', width:180, title: 'ID'}
                    ,{field:'id', width:80, title: 'ID',hide:true}
                    ,{field:'recordName', width:300, title: '菜品名称' }
                    ,{field:'priceString', width:300, title: '售价' }
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:163}
                ]]
                ,where: {
                    id:$("#id").val(),


                } //设定异步数据接口的额外参数

            });
        }


        form.on('select(categoryId)', function(data){
          var categoryId = data.value;
            if(categoryId == "7001"){
                //表格初始化
                table.render({
                    elem: '#specialOffer'
                    ,url:baseUrl+'promotion/specialOffer/refresh'
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,width: 950
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,cols: [[
                        {field:'recordId', width:180, title: 'ID'}
                        ,{field:'id', width:80, title: 'ID',hide:true}
                        ,{field:'recordName', width:200, title: '菜品名称' }
                        ,{field:'priceString', width:200, title: '售价' }
                        ,{field:'specialPriceString', width:200, title: '特价' ,edit:'text'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:163}
                    ]]
                    ,where: {
                        id:$("#id").val(),


                    } //设定异步数据接口的额外参数

                });

            }
            if (categoryId == "7002"){
                //表格初始化
                table.render({
                    elem: '#specialOffer'
                    ,url:baseUrl+'promotion/specialOffer/refresh'
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,width: 950
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,cols: [[
                        {field:'recordId', width:180, title: 'ID'}
                        ,{field:'id', width:80, title: 'ID',hide:true}
                        ,{field:'recordName', width:200, title: '菜品名称' }
                        ,{field:'priceString', width:200, title: '售价' }
                        ,{field:'discountString', width:200, title: '折扣' ,edit:'text'}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:163}
                    ]]
                    ,where: {
                        id:$("#id").val(),


                    } //设定异步数据接口的额外参数

                });

            }
            if (categoryId == "7003" || categoryId == "7004"){
                //表格初始化
                table.render({
                    elem: '#specialOffer'
                    ,url:baseUrl+'promotion/specialOffer/refresh'
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,width: 950
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,cols: [[
                        {field:'recordId', width:180, title: 'ID'}
                        ,{field:'id', width:80, title: 'ID',hide:true}
                        ,{field:'recordName', width:300, title: '菜品名称' }
                        ,{field:'priceString', width:300, title: '售价' }
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:163}
                    ]]
                    ,where: {
                        id:$("#id").val(),


                    } //设定异步数据接口的额外参数

                });
            }

        });


        //行工具栏事件
        table.on('tool(specialOffer)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){
                obj.del();
                $.ajax({
                    url:baseUrl+"promotion/specialOffer/delMap",
                    data:{"id":$("#id").val(),"recordId":data.recordId},
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if (result.code==0){


                        }else {
                            layer.open({
                                title: '删除菜品分类信息'
                                ,content: result.msg
                            });
                        }
                    },
                    error:function () {
                        layer.msg("服务器原地爆炸,请联系管理员!!!");
                    }
                })
            }

        });

        //表头工具栏事件
        table.on('toolbar(specialOffer)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':

                    layer.open({
                        title: '编辑'
                        ,content: baseUrl+'promotion/specialOffer/edit-chooseRecord-ui?merchantsId='+$("#merchantsId").val()+'&orderId='+$("#id").val()
                        ,type:2
                        ,area: ['800px', '650px']
                        ,closeBtn:1
                        ,end:function () {
                            table.reload('specialOffer', {
                                url: baseUrl+'promotion/specialOffer/refresh'
                                ,where: {
                                    id:$("#id").val()
                                } //设定异步数据接口的额外参数

                            });
                        }
                    })


                    break;


            };
        });





        //监听单元格编辑
        table.on('edit(specialOffer)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段


            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"promotion/specialOffer/editMap",
                data:data,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){



                    }else {
                        layer.open({
                            title: '编辑菜品信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
        });





        //取消
        $("#cancel").click(function (){

        var  index = layer.confirm('确定要取消吗？取消后数据不会保存！', {
            btn: ['确定', '取消'] //可以无限个按钮
            , yes: function (index, layero) {

                layer.close(index)
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭

                //发送ajax请求  编辑APP信息
                $.ajax({
                    url:baseUrl+"promotion/specialOffer/delAllMap",
                    data:{"id":$("#id").val()},
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if (result.code==0){

                        }else {
                            layer.open({
                                title: '编辑菜品信息'
                                ,content: result.msg
                            });
                        }
                    },
                    error:function () {
                        layer.msg("服务器原地爆炸,请联系管理员!!!");
                    }
                })


            }
            , btn2: function (index, layero) {

            }
        });



        });




        //添加
        form.on('submit(sub)', function(data){


            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"promotion/specialOffer/saveMap",
                data:data.field,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){

                        layer.open({
                            title: '修改促销信息'
                            ,content: '修改成功！'
                            ,end:function () {
                                //当你在iframe页面关闭自身时
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            }
                        });


                    }else {
                        layer.open({
                            title: '修改采购单失败！'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });








    });
</script>
<script>

</script>
</body>
</html>
